// #ifdef MP || MP-WEIXIN
const { statusBarHeight } = wx.getSystemInfoSync();
// #endif
// #ifdef APP-PLUS || H5
 const { statusBarHeight } = uni.getSystemInfoSync();
 // #endif
 
class NativeMsg {
	// 整个区域的宽高
	viewStyle = {
		backgroundColor: "rgba(255,255,255,0)",
		top: "0px",
		left: "0px",
		width: "100%",
		// 取图片的高度（带阴影的尺寸）
		height: `${uni.upx2px(239)}px`
	};
	constructor() {
		this.hideTime=null;
		this.showTime=null;
		// 记录内容信息，以供回调使用
		this.item = null;
		// 弹出、消失动画要用
		this.offsetTop = -statusBarHeight - uni.upx2px(159);
		// 上边界
		this.startTop = -statusBarHeight - uni.upx2px(159);
		// 下边界
		this.endTop = statusBarHeight;
		// 上滑关闭要用
		this.clientY = 0;
		// nativeObj.View 实例
		this.view = null;
		// 背景图片
		this.bgBitmap = null;
		// 回调函数
		this.cb = null;
		// 隐藏过程flag，防止重复执行
		this.hiding = false;
		// 标记当前弹窗状态
		this.status = "active";
		// 播放音乐
		this.player=null;

		//this.create();
	}
	// 创建区域以及背景
	create(item, cb) {
		this.playMusic();
		this.item=item;
		this.cb=cb || null;
		clearTimeout(this.hideTime);
		if(this.view) {
			this.drawInfo();
			if(this.status == 'close') this.animationShow();
			this.hideTime = setTimeout(()=>{
			   this.animationHide();	
			   clearTimeout(this.hideTime);
			},3000);
			return;
		}

		this.loadBg().then(() => {
			let _view = null;
			// 创建 View区域
			_view = new plus.nativeObj.View(`alarmMsg-ins-20250311173502`, this.viewStyle);
			// 画背景
			_view.drawBitmap(
				this.bitmap,
				{},
				{ width: this.viewStyle.width, height: this.viewStyle.height, left: 0, top: 0 },
				"alarm-bg"
			);
			// 拦截触摸事件: 开启后 区域内的触摸事件不会透传到下面
			_view.interceptTouchEvent(true);
			// 增加点击事件监听
			_view.addEventListener("click", () => {
				if (this.hiding) return;
				this.hiding = true;
				this.cb && this.cb({ type: "click", result: this.item });
				this.animationHide();
			});
			// 触摸事件监听
			_view.addEventListener("touchstart", res => {
				this.clientY = res.clientY;
			});
			// 触摸事件监听
			_view.addEventListener("touchmove", res => {
				const { clientY } = res;
				let offsetY = this.clientY - clientY;
				if (offsetY > 25 && !this.hiding) {
					this.hiding = true;
					this.cb && this.cb({ type: "move", result: this.item });
					this.animationHide();
				}
			});
			// 保存
			this.view = _view;
			// 画内容
			this.drawInfo();
			// 显示
			this.animationShow();
			//3秒自动消失
			this.hideTime = setTimeout(()=>{
			   this.animationHide();	
			},6000);
			
		});
	}
	// 加载背景图片
	loadBg() {
		
		// 创建Bitmap图片
		this.bitmap = new plus.nativeObj.Bitmap("nativeMsg-bg");
		// 以Promise方式封装 图片加载过程
		return new Promise((resolve, reject) => {
			// 加载图片, 路径需要注意
			this.bitmap.load(
				"/static/native-msg/alarm-bg.png",
				() => {
					resolve();
				},
				error => {
					console.log(" ====> error", error);
					reject();
				}
			);
		});
	}
	// 画内容
	drawInfo() {
		const { icon,warningTypeStr, projectName, description } = this.item;
		let draw=[];
		if(icon){
			draw=[
				{
					tag: "img",
					id: "mainImg",
					src: icon,
					position: { top: `${uni.upx2px(59)}px`, left: `${uni.upx2px(80)}px`, width: `${uni.upx2px(40)}px`, height: `${uni.upx2px(40)}px` }
				},
				{
					tag: "font",
					id: "mainFont",
					text: warningTypeStr,
					textStyles: { size: `${uni.upx2px(36)}px`, color: "#262626", weight: "bold", align: "left" },
					position: { top: `${uni.upx2px(60)}px`, left: `${uni.upx2px(121)}px`, height: "wrap_content" }
				},
				{
					tag: "font",
					id: "projectFont",
					text: projectName,
					textStyles: { size: `${uni.upx2px(24)}px`, color: "#7B7B7B", align: "right", overflow: "ellipsis" },
					position: {
						top: `${uni.upx2px(60)}px`,
						left: `50%`,
						width: `${uni.upx2px(750 / 2 - 40 - 20)}px`,
						height: "wrap_content"
					}
				},
				{
					tag: "font",
					id: "infoFont",
					text: description,
					textStyles: { size: `${uni.upx2px(28)}px`, color: "#7B7B7B", align: "left", overflow: "ellipsis" },
					position: {
						top: `${uni.upx2px(117)}px`,
						left: `${uni.upx2px(80)}px`,
						width: `${uni.upx2px(670 - 40 - 10)}px`,
						height: "wrap_content"
					}
				}
			];
		}else{
			draw=[

				{
					tag: "font",
					id: "mainFont",
					text: warningTypeStr,
					textStyles: { size: `${uni.upx2px(36)}px`, color: "#262626", weight: "bold", align: "left" },
					position: { top: `${uni.upx2px(60)}px`, left: `${uni.upx2px(80)}px`, height: "wrap_content" }
				},
				{
					tag: "font",
					id: "projectFont",
					text: projectName,
					textStyles: { size: `${uni.upx2px(24)}px`, color: "#7B7B7B", align: "right", overflow: "ellipsis" },
					position: {
						top: `${uni.upx2px(60)}px`,
						left: `50%`,
						width: `${uni.upx2px(750 / 2 - 40 - 20)}px`,
						height: "wrap_content"
					}
				},
				{
					tag: "font",
					id: "infoFont",
					text: description,
					textStyles: { size: `${uni.upx2px(28)}px`, color: "#7B7B7B", align: "left", overflow: "ellipsis" },
					position: {
						top: `${uni.upx2px(117)}px`,
						left: `${uni.upx2px(80)}px`,
						width: `${uni.upx2px(670 - 40 - 10)}px`,
						height: "wrap_content"
					}
				}
			];
		}
		
		this.view.draw(draw);
	}
	// 简易向下出现动画
	animationShow() {
		this.view.show();
		this.view.setStyle({
			...this.viewStyle,
			top: `${this.offsetTop++}px`
		});
		if (this.offsetTop >= this.endTop) {
			this.status = "active";
			return;
		}
		setTimeout(() => {
			this.animationShow();
		}, 0);
	}
	// 简易向上消失动画
	animationHide() {
		this.view.setStyle({
			...this.viewStyle,
			top: `${this.offsetTop--}px`
		});
		if (this.offsetTop <= this.startTop) {
			//this.view.close();
			this.hiding = false;
			this.status = "close";
			return;
		}
		setTimeout(() => {
			this.animationHide();
		}, 0);
	}
	// 获取当前状态
	getStatus() {
		return this.status;
	}
	// 不用动画，直接消失
	hide() {
		this.view.hide();
		this.view.close();
	}
	//播放音乐
	playMusic(){
		return;
		if(!this.player) this.player = uni.createInnerAudioContext();
		this.player.stop();
		this.player.loop=false;
		this.player.src ='/static/native-msg/IPhone.mp3';
		this.player.play();
	}
}

// 对外暴露一个创建实例的方法
var object=null;
export function NativeObject() {
	if(object != null) return object;
	object=new NativeMsg();
	return object;
}
/**
 * 全局通知，一个地方调用全系统都能弹出通知
 * 复制 /static/native-msg 下的静态资料到你的项目 /static/ 下面
 * 使用示例：
 * import {NativeObject} from '@/static/native-msg/index.js'
 * NativeObject().create({
		icon:'/static/logo.png',   // 显示图标
		path:'/pages/index/index', // 需要跳转路径
		warningTypeStr: "告警消息",  // 消息标题
		projectName: "现在",    // 时间
		description: "十万火急，赶紧处理！！！" //通知内容
	},(res)=>{
		console.log(res);
		// 在这里处理要跳转的路径
		uni.navigateTo({url:res.path});
	});
 * 
 */

